<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		<script type="text/javascript" src="../jquery-ui/jquery-1.8.0.min.js"></script>
		<script type="text/javascript">
			function milisecondsToTime(secs)
			{
				secs=secs/1000;
				var hours = Math.floor(secs / (60 * 60));

				var divisor_for_minutes = secs % (60 * 60);
				var minutes = Math.floor(divisor_for_minutes / 60);
				
				if(hours<10){
					hours='0'+hours;
				}
				
				if(minutes<10){
					minutes='0'+minutes;
				}
				
				var cadena = hours+":"+minutes;

				return cadena
			}
			
			function milisecondsToDate(milisecs){
				var time = new Date(milisecs);
				
				var theyear=time.getFullYear();
				var themonth=time.getMonth()+1;
				var thetoday=time.getDate();
				
				var cadena = theyear+"-"+themonth+"-"+thetoday;
				
				return cadena;
			}
			
			$(function () {
				var chart;
				$(document).ready(function() {
					chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						zoomType: 'x',
						spacingRight: 20
					},
					title: {
						text: 'USD to EUR exchange rate from 2006 through 2008'
					},
					subtitle: {
						text: document.ontouchstart === undefined ?
						'Click and drag in the plot area to zoom in' :
						'Drag your finger over the plot to zoom in'
					},
					xAxis: {
						type: 'datetime',
						maxZoom: 7 * 24 * 3600000, // 7 dias
						title: {
							text: null
						}
					},
					yAxis: {
						title: {
							text: 'Exchange rate'
						},
						type: 'datetime',
						reversed: true,
						//min: 0,
						//max: 86300000
					},
                    tooltip: {
						shared: true,
						formatter:function() {
							return 'Día: <b>'+ milisecondsToDate(this.x) + '</b><br>Hora: <b>'+ milisecondsToTime(this.y) +'</b>';
						}
					},
					legend: {
						enabled: true,
					},
					series: [{
						name: 'Marcas de Entrada',
						type: 'line',
						data: 
							[[1349060400000, 54060000], [1349146800000, 54120000], [1349233200000, 54420000], [1349319600000, 54420000], [1349406000000, 48240000], [1349492400000, 27000000], [1349751600000, 54120000], [1349838000000, 53280000], [1349924400000, 54300000], [1350010800000, 54180000], [1350270000000, 54300000], [1350356400000, 54120000], [1350442800000, 53940000], [1350529200000, 54300000], [1350615600000, 54300000], [1350702000000, 32580000], [1350874800000, 54300000], [1351047600000, 52980000], [1351134000000, 54420000], [1351220400000, 54420000], [1351479600000, 54540000], [1351652400000, 54540000]]
						
					},
					{
						name: 'Hora de Entrada',
						type:'line',
						data: [[1349060400000, 54000000], [1351652400000,54000000]]
					},
					]
				});
			});
    
		});
		</script>
	</head>
	<body>
<script src="highcharts.js"></script>
<script src="modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

	</body>
</html>

